<template>

  <div>
    <div v-if="!payRes">
      <br>
      <divider><span class="ion-ios-paper-outline"></span> 请选择您的支付方式</divider>
      <br>
      <form-preview :header-label="'付款金额'"
                    :header-value="'￥' + sum.toFixed(2)"
                    :body-items="list"
                    :footer-buttons="buttons">

      </form-preview>
      <br>
      <br>
    </div>
    <div id="iframe" name="iframe" v-html="payRes" style="height: 0;width: 100%;display: none">
    </div>
  </div>
</template>

<script>
  /* eslint-disable no-undef */
  import { FormPreview, Group, Cell, Divider } from 'vux'
  import service from '../models/services'
  import wx from 'weixin-js-sdk'

  export default {
    data () {
      return {
        orderList: [],
        list: [],
        ids: [],
        buttons: [
          {
            style: 'primary',
            text: ' 微信支付',
            onButtonClick: (name) => {
              this.pay('wechart')
            }
          },
          {
            style: 'primary',
            text: ' 支付宝支付',
            onButtonClick: (name) => {
              // 请在行页面打开该窗口 进行支付
              this.pay('alipay')
            }
          },
          {
            style: 'default',
            text: '返回课程列表',
            link: '/'
          }
        ],
        payRes: '',
        sum: 0,
        config: {}
      }
    },
    components: {
      FormPreview,
      Group,
      Cell,
      Divider
    },
    methods: {
      getCarList () {
        const self = this
        this.options = []
        service.car.list()
          .then((res) => {
            const code = res.data.code
            if (code === 0) {
              this.orderList = res.data.result
              this.orderList.forEach((item) => {
                this.ids.push(item.id)
                service.chapter.get(item.cid, false)
                  .then((res) => {
                    if (res.data.code === 0) {
                      const cha = res.data.result
                      this.list.push({
                        label: '章节名称: ' + cha.comment,
                        value: '章节价格: ' + cha.price / 100
                      })
                      this.sum += cha.price / 100
                    }
                  })
              })
            } else {
              this.$vux.alert.show({
                title: '错误提示',
                content: res.data.message,
                onShow () {
                  self.go(-1)
                },
                onHide () {
                  self.go(-1)
                }
              })
            }
          })
      },
      genOrder () {
        return service.order.gen(this.ids)
      },
      pay (type) {
        let fn = null
        switch (type) {
          case 'wechart':
            fn = service.pay.wechart
            break
          case 'alipay':
            fn = service.pay.alipay
            break
        }
        this.genOrder().then((res) => {
          if (res.data.code === 0) {
            let no = res.data.result.tradeNo
            fn(no).then((res) => {
              if (type === 'alipay') {
                this.payRes = res.data.result
                this.$nextTick(() => {
                  document.getElementById('iframe').contentWindow.document.forms[0].submit()
                })
              } else if (type === 'wechart') {
                const config = Object.assign({}, res.data.result)
                this.config = config
                wx.config({
                  debug: false,
                  appId: `${config.appId}`,
                  timestamp: config.timeStamp,
                  nonceStr: config.nonceStr,
                  signature: config.signature,
                  jsApiList: ['chooseWXPay']
                })
                wx.chooseWXPay({
                  appId: `${config.appId}`,
                  timestamp: config.timeStamp,
                  nonceStr: config.nonceStr,
                  package: `${config.package}`,
                  signType: config.signType,
                  paySign: config.paySign,
                  success: (res) => {
                    if (res.err_msg === 'get_brand_wcpay_request:ok') {
                      alert('支付成功')
                    } else {
                      alert('支付失败')
                    }
                  }
                })
              }
            })
          } else {
            this.$vux.alert.show({
              title: '错误提示',
              content: res.data.message,
              onShow () {
              },
              onHide () {
              }
            })
          }
        })
      }
    },
    created () {
      this.getCarList()
    }
  }
</script>
